<template>
	<view class="container container01">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/back.png" mode="widthFix" class="back"></image>
				<view class="tit">&nbsp;</view>
			    <view class="h_zx" v-show="h_show_dxy" @tap="open_revoke_box"><image src="/static/images/g_img26.png" mode="widthFix"></image>撤销订单</view>
				<view class="h_zx h_ss" v-show="h_show_ss" @tap="open_appeal_box"><image src="/static/images/img_95.png" mode="widthFix"></image>申诉</view>
				<view class="h_zx h_ssjl" v-show="h_show_ssjl"><image src="/static//images/img_66.png" mode="widthFix"></image>申诉记录</view>
				<view class="h_zx h_zcmx" v-show="h_show_zcmx"><image src="/static//images/img_96.png" mode="widthFix"></image>资产明细</view>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
		<!--详情start-->
		<view class="order_detial">
			<view class="state">
				<image src="/static/images/img_87.png"></image>
				<view>
					<text>待买家响应</text>
					<view class="wait">已等待：<text><u-count-down :time="7* 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down></text></view>
					<view class="wait wait01">已超时</view>
					<view class="wait wait02">申诉属性：交易无法确认</view>
					<view class="wait wait02">申诉属性：超时未付款</view>
					<view class="wait wait02">申诉属性：交易无法确认</view>
				</view>
			</view>
			<view class="palce">
				<view class="ons">150 ADC<text>出售数量</text></view>
				<view class="on">1030.50 CNY<text>待收金额</text></view>
			</view>
			
			<!--待响应start-->
			<view v-show="show_dxy">
				<view class="tab_order">
					<view :class="dfkIndex==0?'active':''" @click="dfk_Index(0)">订单详情</view>
					<view :class="dfkIndex==1?'active':''" @click="dfk_Index(1)">收款资料</view>
					<view class="disable">确认收款</view>
				</view>
				<view v-show="dfkIndex == 0">
					<view class="detial_list detial_list01">
						<view>单价<text>1ADC = 6.87 CNY</text></view>
						<view>出售数量<text>600 ADC</text></view>
						<view>收款金额<text>1030.50 CNY</text></view>
						<view>单号<text>220928100486366</text></view>
						<view>订单日期<text>2022-09-10 14:43:08</text></view>
					</view>
				</view>
				<view v-show="dfkIndex == 1">
					<view class="order_list">
						<view>
							<image src="/static/images/do_01.png" mode="widthFix" class="img"></image>
							<text>赵本山</text>
						</view>
						<view>
							<image src="/static/images/do_02.png" mode="widthFix" class="img"></image>
							<view @tap="open_skm_box">收款码</view>
							<text class="on">13509843556</text>
						</view>
						<view>
							<image src="/static/images/do_03.png" mode="widthFix" class="img"></image>
							<view @tap="open_skm_box_wx">收款码</view>
							<text class="on">Zhanbenshan</text>
						</view>
						<view>
							<image src="/static/images/do_04.png" mode="widthFix" class="img"></image>
							<text>中国农业银行</text>
						</view>
						<view>
							<image src="/static/images/do_05.png" mode="widthFix" class="img"></image>
							<text class="on">95599 8008 56473 54895</text>
						</view>
					</view>
					<view class="man_btn">
						<button>管理收款账户</button>
						<button class="on">管理收款账户</button>
						<u-safe-bottom></u-safe-bottom>
					</view>
				</view>
			</view>
			<!--待响应end-->
			
			<!--待收款start-->
			<view v-show="show_dfk">
				<view class="tab_order">
					<view :class="dfkIndex==0?'active':''" @click="dfk_Index(0)">订单详情</view>
					<view :class="dfkIndex==1?'active':''" @click="dfk_Index(1)">收款资料</view>
					<view :class="dfkIndex==2?'active':''" @click="dfk_Index(2)">确认收款</view>
				</view>
				<view v-show="dfkIndex == 0">
					<view class="detial_list">
						<view>单价<text>1ADC = 6.87 CNY</text></view>
						<view>出售数量<text>600 ADC</text></view>
						<view>收款金额<text>1030.50 CNY</text></view>
						<view>单号<text>220928100486366</text></view>
						<view>订单日期<text>2022-09-10 14:43:08</text></view>
					</view>
					<view class="pay_info">
						<view><image src="/static/images/img_97.png" mode="widthFix"></image>138 0023 4567</view>
						<text>付款人：赵本山</text>
					</view>
				</view>
				<view v-show="dfkIndex == 1">
					<view class="order_list">
						<view>
							<image src="/static/images/do_01.png" mode="widthFix" class="img"></image>
							<text>赵本山</text>
						</view>
						<view>
							<image src="/static/images/do_02.png" mode="widthFix" class="img"></image>
							<view @tap="open_skm_box">收款码</view>
							<text class="on">13509843556</text>
						</view>
						<view>
							<image src="/static/images/do_03.png" mode="widthFix" class="img"></image>
							<view @tap="open_skm_box_wx">收款码</view>
							<text class="on">Zhanbenshan</text>
						</view>
						<view>
							<image src="/static/images/do_04.png" mode="widthFix" class="img"></image>
							<text>中国农业银行</text>
						</view>
						<view>
							<image src="/static/images/do_05.png" mode="widthFix" class="img"></image>
							<text class="on">95599 8008 56473 54895</text>
						</view>
					</view>
					<view class="man_btn">
						<button>管理收款账户</button>
						<button class="on">管理收款账户</button>
						<u-safe-bottom></u-safe-bottom>
					</view>
				</view>
				<view v-show="dfkIndex == 2">
					<view class="dfk_upload">
						<view class="img_list imgs">
							<u-album :urls="urls1" keyName="src2" singleSize="217rpx" multipleSize="217rpx" space="12rpx"></u-album>
						</view>
						<view class="no_img">
							<image src="/static/images/img_38.png" mode="widthFix"></image>
							<text>暂无内容</text>
						</view>
					</view>
					<view class="f_btn">
						<button class="submit on">确认收款</button>
						<button class="submit on" @tap="open_get_sure_box">已收到款</button>
						<button class="back_btn back_btns">申诉</button>
						<u-safe-bottom></u-safe-bottom>
					</view>
				</view>
			</view>
			<!--待收款end-->
			<!--已撤销start-->
			<view v-show="show_ycx">
				<view class="tab_order">
					<view class="active">订单详情</view>
					<view class="disable">收款资料</view>
					<view class="disable">确认收款</view>
				</view>
				<view>
					<view class="detial_list">
						<view>单价<text>1ADC = 6.87 CNY</text></view>
						<view>出售数量<text>600 ADC</text></view>
						<view>收款金额<text>1030.50 CNY</text></view>
						<view>单号<text>220928100486366</text></view>
						<view>订单日期<text>2022-09-10 14:43:08</text></view>
					</view>
				</view>
			</view>
			<!--已撤销end-->
			
			
		</view>
		<!--详情end-->
		
		<!--撤销弹窗start-->
		<u-popup mode="bottom" :show="revoke_box" :closeOnClickOverlay="true" @close="revoke_box_close">
			<view class="detial_box">
				<view class="tit">您正在撤销订单！<image src="/static/images/img_31.png" mode="widthFix" @click="revoke_box_close"></image></view>
				<view class="detial_check">
					<u-checkbox-group>
						<u-checkbox shape="square" label="" activeColor="#332C2B" checked></u-checkbox>
					</u-checkbox-group>
					<view class="con">订单撤销后，您的出售金额将返回到可用资产余额，可在资产明细里查看记录。</view>
				</view>
				<view class="btn btn_sells">
					<button class="submit on" @click="revoke_box_close">删除</button>
				</view>
			</view>
		</u-popup>
		<!--撤销弹窗end-->
		
		<!--收款码弹窗start-->
		<u-popup mode="center" :show="skm_box" :closeOnClickOverlay="true" @close="skm_popup_close" customStyle="background: none">
			<view class="skm_box">
				<view class="skm_con">
					<image src="/static/images/img_76.png" mode="widthFix" class="img_con"></image>
				</view>
				<view class="skm_btn">
					<view @tap="skm_popup_close"><image src="/static/images/img_39.png" mode="widthFix"></image>关闭</view>
					<view @tap="skm_popup_close"><image src="/static/images/img_40.png" mode="widthFix"></image>保存</view>
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" :show="skm_box_wx" :closeOnClickOverlay="true" @close="skm_wx_popup_close" customStyle="background: none">
			<view class="skm_box">
				<view class="skm_con">
					<image src="/static/images/img_78.png" mode="widthFix" class="img_con"></image>
				</view>
				<view class="skm_btn">
					<view @tap="skm_wx_popup_close"><image src="/static/images/img_39.png" mode="widthFix"></image>关闭</view>
					<view @tap="skm_wx_popup_close"><image src="/static/images/img_40.png" mode="widthFix"></image>保存</view>
				</view>
			</view>
		</u-popup>
		<!--收款码弹窗end-->
		
		<!--交易无法确认start-->
		<u-popup mode="bottom" :show="termination_box" :closeOnClickOverlay="true" @close="termination_box_close">
			<view class="detial_box">
				<view class="tit">交易无法确认！<image src="/static/images/img_31.png" mode="widthFix" @click="termination_box_close"></image></view>
				<view class="ter_check">
					<u-radio-group>
						<u-radio  activeColor="#332C2B" v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"></u-radio>
					</u-radio-group>
				</view>
				<view class="ter_words">
					<u-textarea v-model="words" placeholder="请简要说明取消原因..." placeholderStyle="color:#A1A1A1"></u-textarea>
				</view>
				<view class="detial_check">
					<u-checkbox-group>
						<u-checkbox shape="square" activeColor="#332C2B" checked></u-checkbox>
					</u-checkbox-group>
					<view class="con">建议与付款人沟通后再进行此操作。恶意申诉，或申诉内容与实际情况不符的，将永久冻结账户。</view>
				</view>
				<view class="btn btns">
					<button class="submit on" @click="open_appeal_success_box">提交申诉</button>
				</view>
			</view>
		</u-popup>
		<!--交易无法确认end-->
		
		<!--申诉弹窗start-->
		<u-popup mode="bottom" :show="appeal_box" :closeOnClickOverlay="true" @close="appeal_box_close">
			<view class="detial_box">
				<view class="tit">超时未付款！<image src="/static/images/img_31.png" mode="widthFix" @click="appeal_box_close"></image></view>
				<view class="ter_check">
					<u-radio-group>
						<u-radio  activeColor="#332C2B" v-for="(item, index) in radiolist2" :key="index" :label="item.name" :name="item.name"></u-radio>
					</u-radio-group>
				</view>
				<view class="ter_words">
					<u-textarea v-model="words" placeholder="请简要说明取消原因..." placeholderStyle="color:#A1A1A1"></u-textarea>
				</view>
				<view class="detial_check">
					<u-checkbox-group>
						<u-checkbox shape="square" activeColor="#332C2B" checked></u-checkbox>
					</u-checkbox-group>
					<view class="con">建议在买家明确表示放弃交易时再更换付款人，如果明知买家已付款但暂未上传凭证的情况下恶意进行此操作，将永久冻结账户。</view>
				</view>
				<view class="btn btns">
					<button class="submit on" @click="open_appeal_success_box">提交申诉</button>
				</view>
			</view>
		</u-popup>
		<u-popup mode="bottom" :show="appeal_success_box" :closeOnClickOverlay="true" @close="succees_termination_close" customStyle="background: none" >
			<view class="success_box">
				<text class="close" @tap="succees_termination_close"></text>
				<image src="/static/images/img_11.png"></image>
				<view class="con">提交成功<text>等待系统处理</text></view>
				<view class="btn">
					<button class="submit on" @tap="succees_termination_close">查看订单</button>
					<button class="back_btn" @tap="succees_termination_close">申诉记录</button>
					<u-safe-bottom customStyle="background: #FAFAFA"></u-safe-bottom>
				</view>
			</view>
		</u-popup>
		<!--申诉弹窗end-->
		
		<!--确认已收款弹窗start-->
		<u-popup mode="bottom" :show="get_sure_box" :closeOnClickOverlay="true" @close="get_sure_box_close">
			<view class="detial_box">
				<view class="tit">确认已收款！<image src="/static/images/img_31.png" mode="widthFix" @click="get_sure_box_close"></image></view>
				<view class="detial_check">
					<u-checkbox-group>
						<u-checkbox shape="square" label="" activeColor="#332C2B" checked></u-checkbox>
					</u-checkbox-group>
					<view class="con">请认真核对买家上传的付款凭证以及“订单金额与到账金额”是否一致，确保准确无误后再进行此操作。</view>
				</view>
				<view class="btn btn_sells">
					<button class="submit on" @click="open_get_sure_success">确定</button>
				</view>
			</view>
		</u-popup>
		<u-popup mode="bottom" :show="get_sure_success_box" :closeOnClickOverlay="true" @close="get_sure_close" customStyle="background: none" >
			<view class="success_box">
				<text class="close" @tap="get_sure_close"></text>
				<image src="/static/images/img_11.png"></image>
				<view class="con">交易完成<text>ADC已转至对方账户</text></view>
				<view class="btn">
					<button class="submit on" @tap="get_sure_close">查看订单</button>
					<button class="back_btn" @tap="get_sure_close">资产明细</button>
					<u-safe-bottom customStyle="background: #FAFAFA"></u-safe-bottom>
				</view>
			</view>
		</u-popup>
		<!--确认已收款弹窗end-->
		
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
				navIndex: 0,
				show_dxy:false, //待响应
				h_show_dxy:false,
				show_dfk: false, //待收款
				dfkIndex:0,
				revoke_box: false,  //撤销弹窗
				skm_box: false, //收款码
				skm_box_wx: false,
				fileList1: [{
					url:'/static/images/img_01.jpg'
				},{
					url:'/static/images/img_01.jpg'
				}],
				termination_box: false, //交易无法确认
				radiolist1: [{
					name: '凭证造假',
				},{
					name: '金额不符',
				},{
					name: '其他',
				}],
				h_show_ss: false, //申诉
				appeal_box: false,
				radiolist2: [{
					name: '买家放弃交易',
				},{
					name: '未联系买家',
				},{
					name: '其他',
				}],
				words:'意为荣玩家服务的平台，因而是战想武装起新概念是用毛泽东思想武装起来的平台，是人全心全意为荣玩家服务的平台，',
				appeal_success_box: false,
				h_show_ssjl: false, //申诉记录
				h_show_zcmx: false, //资产明细
				show_jywc: false, //交易完成
				albumWidth: 0,
				urls1: [{
					src2: '/static/images/img_01.jpg',
				},{
					src2: '/static/images/img_43.png',
				},{
					src2: '/static/images/img_43.png',
				}],
				show_ycx: false, //已撤销
				get_sure_box: false, //确认已收款
				get_sure_success_box: false
	        }
	    },
		onLoad(option){
			if(option.status==1){
				this.show_dxy = true,
				this.h_show_dxy= true
			}else if(option.status==2){
				this.show_dfk = true,
				this.h_show_ss = true
			}else if(option.status==3){
				this.show_dfk = true,
				this.h_show_zcmx = true
			}else if(option.status==4){
				this.show_dfk = true,
				this.h_show_ssjl = true
			}else if(option.status ==5){
				this.show_ycx = true
			}
			console.log(option.status)
		},
	    methods: {
			dfk_Index(index) {
				this.dfkIndex = index;
			},
			
			//撤销弹窗
			open_revoke_box(){
				this.revoke_box = true
			},
			revoke_box_close(){
				this.revoke_box = false
			},
			
			//收款码
			open_skm_box(){
				this.skm_box = true
			},
			skm_popup_close(){
				this.skm_box = false
			},
			open_skm_box_wx(){
				this.skm_box_wx = true
			},
			skm_wx_popup_close(){
				this.skm_box_wx = false
			},
			//交易无法确认
			open_termination_box(){
				this.termination_box = true
			},
			termination_box_close(){
				this.termination_box = false
			},
			//申诉
			open_appeal_box(){
				this.appeal_box = true
			},
			appeal_box_close(){
				this.appeal_box = false
			},
			open_appeal_success_box(){
				this.appeal_box = false,
				this.termination_box = false,
				this.appeal_success_box = true
			},
			succees_termination_close(){
				this.appeal_success_box =false
			},
			
			//确认已收款
			open_get_sure_box(){
				this.get_sure_box = true
			},
			get_sure_box_close(){
				this.get_sure_box = false
			},
			open_get_sure_success(){
				this.get_sure_success_box = true,
				this.get_sure_box = false
			},
			get_sure_close(){
				this.get_sure_success_box  = false
			}
	    },
		computed: {
			
		},
	}
</script>

<style lang="scss">
@import url("../../common/style.scss");
@import url("create.scss");
</style>